<template>
    <header>
        <div class="mr-root">
            <public-header>
                <p class="title">斗鱼TV</p>
            </public-header>
            <loading v-if="showLoading"></loading>
            <div class="mr-content">
                <home-item v-for="room in roomList" :r="room"></home-item>
                <p v-if="error">不好意思，加载失败，请稍后再试...</p>
                <div class="clear"></div>
                <div class="loadMore" v-if="!showLoading"><span class="load" @click="loadMore">点击加载更多</span></div>
            </div>
            <back-top></back-top>
        </div>
    </header>
</template>
<script>
    // import PublicHeader from '../components/Header'
    // import Loading from '../components/Loading'
    //导入导出只能用大写

    import HomeItem from '../components/HomeItem'
    import Public from '../public.js'
    import BackTop from '../components/BackTop'
    export default{
        data(){
            return {
                showLoading:true,
                roomList:[],
                error:false,
                count:0
            }
        },
        mixins:[Public],
        components:{
            HomeItem,BackTop
        },
        created(){
            this.getRoomList(this.count)
    },
    methods:{
        getRoomList(page){
            this.axios.get('/douyuapi/RoomApi/live?offset='+page+'&limit=20')
                .then(data=>{
                    // console.log(data)
                    this.error=false
                    // this.roomList.push(data.data.data)
                    this.roomList=this.roomList.concat(data.data.data)
                    // console.log(this.roomList)一个数组
                    setTimeout(()=>{
                        this.showLoading=false
                    })

                })
                .catch(err=>{
                    this.error=true
                    setTimeout(()=>{
                        this.showLoading=false
                    },2000)
                })
        },
        loadMore(){
            this.count++
            this.getRoomList(this.count)
        }
    }
}
</script>

<style>
    .mr-content{
        /*padding: 0 15px;*/
        padding: 44px 0 0 .3rem;
        overflow: hidden;
    }
    .loadMore{
        margin: 15px 0;
        text-align: center;
    }
    .load{
        display: inline-block;
        border: 1px solid #000;
        border-radius: 10px;
        line-height: 40px;
        width: 2rem;
    }

</style>
